<template>
  <div class="approval-container">
    <div style="margin-bottom: 10px">
      <p-radio-group v-model="form.approveStatus" class="radio-container">
        <span class="agree mr-15 ">处理结果</span>
        <!-- prettier-ignore -->
        <p-radio :disabled="disabledAgree" :value="true">
          通过
        </p-radio>
        <div
          v-if="order"
          v-show="form.approveStatus"
          style="display: flex; margin: 0, 10px;"
        >
          <span class="agree mr-15 poros-table-header-required">
            转下一阶段
          </span>
          <SelectDefault
            v-model="form.nodeCode"
            style="width: 15vw; margin-right: 20px;"
            :options="node"
            :has-all="false"
          />
          <span class="agree mr-15 poros-table-header-required">
            指定负责人
          </span>
          <SelectSearchPeople
            v-model="form.handleUser"
            style="width: 15vw; margin-right: 20px;"
            value-key="handleUser"
            @change="hadlePMChange"
          />
        </div>
        <!-- prettier-ignore -->
        <p-radio :disabled="disabledRefuse" :value="false">
          失销
        </p-radio>
      </p-radio-group>
    </div>
    <div style="margin-bottom: 10px">
      <p-form-model :rules="rules" :model="form" class="form-container">
        <p-form-model-item
          v-show="showLose"
          label="失销类别"
          prop="leseLevel"
          style="margin-left: -10px"
        >
          <Selectleseleave
            v-model="form.leseLevel"
            style="width: 20vw"
            :has-all="false"
            @input="hanlderChange"
          />
        </p-form-model-item>
        <p-form-model-item
          v-show="showLose"
          label="失销细类"
          prop="leseDetail"
          style="margin-left: 10px"
        >
          <Selectleseleave
            v-model="form.leseDetail"
            :parent-id="parentId"
            lese-level="2"
            :has-all="false"
            style="width: 20vw"
          />
        </p-form-model-item>
      </p-form-model>
      <p-form-model :rules="rules" :model="form" style="margin-left: -13px;">
        <p-form-model-item v-show="showLose" label="失销说明">
          <p-textarea v-model="form.reason" class="textarea" />
        </p-form-model-item>
        <p-form-model-item label="阶段说明" prop="approveOpinion">
          <p-textarea v-model="form.approveOpinion" class="textarea" />
        </p-form-model-item>
        <p-form-model-item label="上传附件" prop="accessory">
          <p-button @click="upload">
            <p-icon type="upload" />
          </p-button>
          <p-tooltip
            placement="top"
            title="附件上传的格式：xls,
        xlsx,
        doc,
        docx,
        ppt,
        pptx,
        gif,
        png,
        jpg,
        jpeg
        pdf,
        rar,
        zip,"
          >
            <p-icon
              type="question-circle"
              style="color: blue; margin-left: 20px"
            />
          </p-tooltip>
        </p-form-model-item>
        <p-form-model-item>
          <span style=" display: block; padding: 3px 0">
            <a
              v-if="form.list.length"
              :href="form.list[form.list.length - 1].atthAccessPath"
            >
              {{ form.list[form.list.length - 1].atthName }}
            </a>
            <p-icon
              v-show="form.list.length"
              type="delete"
              style="color: rgb(24, 144, 255); cursor: pointer"
              @click="deleteFile(form.list)"
            />
          </span>
        </p-form-model-item>
      </p-form-model>
    </div>
    <DialogUploadBusiness
      :id="form.id"
      ref="upload"
      :list.sync="form.list"
      :file-list.sync="fileList"
      type="business_stage"
      :stage="businessNode"
      :isload.sync="isload"
      @change="handleInsertChange"
    />
  </div>
</template>

<script>
import { getDicList } from '@/api/public.js';
import { getAttachmentDelete } from '@/api/business';
import DialogUploadBusiness from '@/components/dialog/DialogUploadBusiness';
import Selectleseleave from '@/components/select/Selectleseleave.vue';
export default {
  components: {
    DialogUploadBusiness,
    Selectleseleave,
  },
  props: {
    hasCopy: {
      type: Boolean,
      default: true,
    },
    disabledRefuse: {
      type: Boolean,
      default: false,
    },
    disabledAgree: {
      type: Boolean,
      default: false,
    },
    order: {
      type: Boolean,
      default: true,
    },
    businessNode: {
      type: [String, Number],
      default: 2,
    },
    opportunityStageList: {
      type: Array,
      default: () => [],
    },
    userName: {
      type: [String, Number],
      default: '',
    },
    userId: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      parentId: '1',
      fileList: [],
      isload: false,
      node: [],
      form: {
        approveStatus: '',
        approveOpinion: '',
        leseLevel: '',
        leseDetail: '',
        reason: '',
        nodeCode: (parseInt(this.businessNode) + 1).toString(),
        handleUser: [],
        handleUserId: '',
        handleUserName: '',
        list: [],
      },
      rules: {
        approveOpinion: [
          { max: 255, message: '输入的内容过长', trigger: 'blur' },
        ],
        leseLevel: [
          { required: true, message: '请选择类别！', trigger: 'change' },
        ],
        leseDetail: [
          { required: true, message: '请选择细类！', trigger: 'change' },
        ],
      },
      showLose: false,
    };
  },
  computed: {},
  watch: {
    'form.approveStatus': {
      handler(val) {
        this.showLose = !val;
      },
    },

    'form.nodeCode': {
      handler(val) {
        if (this.order) {
          const name = this.opportunityStageList[val - 1].currentUserName;
          this.form.handleUser = [['', name]];
          this.form.handleUserId = this.opportunityStageList[
            val - 1
          ].currentUserId;
          this.form.handleUserName = this.opportunityStageList[
            val - 1
          ].currentUserName;
          if (!name) {
            this.form.handleUser = [];
          }
        }
      },
      immediate: true,
    },
  },
  created() {
    this.getDicList();
  },
  methods: {
    async deleteFile(list) {
      const result = await getAttachmentDelete(list[list.length - 1].id);
      if (result.data.code === 0) {
        this.form.list = [];
      }
    },
    async getDicList() {
      const res = await getDicList('business_stage_process_node');
      const nodeOption = res?.data?.data || [];
      this.node = nodeOption.filter(
        item => item.value > this.businessNode && item.value !== '8'
      );
    },
    upload() {
      this.$refs.upload?.uploader();
    },
    hadlePMChange(val) {
      this.form.handleUser = val;
      this.form.handleUserId = val[0][0];
      this.form.handleUserName = val[0][1];
    },

    hanlderChange(val) {
      this.parentId = val;
      this.form.leseDetail = '';
    },
  },
};
</script>

<style lang="less" scoped>
.approval-container {
  margin-bottom: 20px;
  padding-left: 40px;
  .agree {
    margin-left: -12px;
  }
}
.textarea {
  height: 90px !important;
  width: 73vw;
  resize: none;
}
/deep/ textarea.poros-input {
  max-width: 80vw;
}
/deep/ .poros-form-item {
  display: flex;
  margin-bottom: 10px;
}
.radio-container {
  display: flex;
  margin-bottom: 10px;
}
.item-container {
  display: flex;
}
.form-container {
  margin-left: -13px;
  display: flex;
}
</style>
